<template>
	<view class="addBox">
		<view class="title f-32">玻璃品种</view>
		<view class="flex flex-y-center flex-x-between addItem" @click="choicePircker('blpzArr',pageItem.materials)">
			<view>{{pageItem.materials?pageItem.materials+'/'+pageItem.thickness:'请选择'}}</view>
			<text class="iconfont icon-xiala f-28"></text>
		</view>
		<template v-if="pageItem.materials.indexOf('lowe')!=-1">
			<!-- 只有是lowe的时候才选择TNG -->
			<view class="title f-32 f-w col-red">选择TNG</view>
			<view class="flex flex-y-center flex-x-between addItem" @click="choicePircker('tngArr',pageItem.tng)">
				<view>{{pageItem.tng||'请选择'}}</view>
				<text class="iconfont icon-xiala f-28"></text>
			</view>
		</template>
		<!-- 选择中空和选择夹胶只能选择一个 -->
		<template v-if="!pageItem.interlayer">
			<view class="title f-32">选择中空</view>
			<view class="flex flex-y-center flex-x-between addItem" @click="choicePircker('zkArr',pageItem.hollow)">
				<view>{{pageItem.hollow||'请选择'}}</view>
				<text class="iconfont icon-xiala f-28"></text>
			</view>
		</template>
		<template v-if="!pageItem.hollow">
			<view class="title f-32">选择夹胶</view>
			<view class="flex flex-y-center flex-x-between addItem" @click="choicePircker('jjArr',pageItem.interlayer)">
				<view>{{pageItem.interlayer||'请选择'}}</view>
				<text class="iconfont icon-xiala f-28"></text>
			</view>
		</template>
		<view class="bjBot flex flex-y-center flex-x-between">
			<view class="btn1 item" @click="jumpBack">取消</view>
			<view class="btn2 item" @click="okAdd">确认添加</view>
		</view>
		<uni-popup ref="pickerDom" type="bottom" style="z-index: 9999999;position: relative;" @change="changePopup">
			<div class="popup-view" style="padding-bottom: 0;">
				<div class="popup-view-header">
					<div class="popup-view-cancel" @click="pickerCancel" style="color: #999;"> 取消 </div>
					<div class="popup-view-confirm" @click="pickerConfirm" style="color: #ff2826;"> 完成 </div>
				</div>
				<picker-view :immediate-change="true" :indicator-style="pickerObj.indicatorStyle"
					:value="pickerObj.pickerIndex" @change="bindPickerChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in pickerObj.dataList" :key="index">{{item.dictLabel}}
						</view>
					</picker-view-column>
					<picker-view-column v-if="pickerObj.curChoice=='blpzArr'">
						<view class="item" v-for="(item,index) in pageData.blhdArr" :key="index">{{item.dictLabel}}
						</view>
					</picker-view-column>
				</picker-view>
			</div>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getDictData
	} from "@/api/index.js";
	import {
		nextTick,
		ref
	} from 'vue'
	const pickerDom = ref(null);
	const pageData = ref({
		blpzArr: [], //玻璃品种
		blhdArr: [], //玻璃厚度
		zkArr: [], //选择中空
		jjArr: [], //选择夹胶
		tngArr: [], //选择TNG		
	})
	const pageItem = ref({
		thickness: '', //玻璃厚度
		materials: '', //玻璃材质
		tng: '', //tng
		interlayer: '', //夹胶
		hollow: '', //中空
	})
	const pickerObj = ref({
		indicatorStyle: `height: 40px;padding-bottom:0`,
		pickerIndex: [0, 0, 0],
		dataList: [], //显示选择的数据
		curChoice: '', //当前选择数据标识
		oldArr: []
	})

	const choicePircker = (value, val) => {
		// pickerObj.value.dataList = [];
		pickerObj.value.curChoice = value;

		if (value == 'jjArr' || value == 'zkArr') {
			pickerObj.value.dataList = [...[{
				dictLabel: '请选择'
			}], ...pageData.value[value]];
		} else {
			pickerObj.value.dataList = pageData.value[value]
		}
		if (val) {
			backIndex(val, value)
		}
		pickerDom.value.open()
	}
	const backIndex = (val, value) => {
		// picker回显index 
		let i = 0;
		let ii = 0;
		pickerObj.value.dataList.forEach((el, index) => {
			if (el.dictLabel == val) {
				i = index
			}
		})
		if (value == 'blpzArr') {
			pageData.value.blhdArr.forEach((el, index) => {
				if (el.dictLabel == pageItem.value.thickness) {
					ii = index
				}
			})
		}
		nextTick(() => {
			pickerObj.value.pickerIndex[0] = i
			pickerObj.value.pickerIndex[1] = ii
		})
	}
	const bindPickerChange = (e) => {
		pickerObj.value.pickerIndex[0] = e.detail.value[0]
		pickerObj.value.pickerIndex[1] = e.detail.value[1]
	}
	const changePopup = (e) => {
		if (!e.show) {
			pickerObj.value.pickerIndex = ['0', '0', '0']
		}
	}
	const pickerCancel = () => {
		pickerObj.value.pickerIndex = [0, 0, 0]
		pickerDom.value.close()
	}
	// 点击完成
	const pickerConfirm = () => {
		let index = pickerObj.value.pickerIndex[0];
		let idx = pickerObj.value.pickerIndex[1];
		if (pickerObj.value.curChoice == 'blpzArr') {
			pageItem.value.materials = pickerObj.value.dataList[index].dictLabel;
			pageItem.value.thickness = pageData.value.blhdArr[idx].dictLabel;
		} else if (pickerObj.value.curChoice == 'zkArr') {
			pageItem.value.hollow = index == 0 ? '' : pickerObj.value.dataList[index].dictLabel;
		} else if (pickerObj.value.curChoice == 'jjArr') {
			pageItem.value.interlayer = index == 0 ? '' : pickerObj.value.dataList[index].dictLabel;
		} else if (pickerObj.value.curChoice == 'tngArr') {
			pageItem.value.tng = pickerObj.value.dataList[index].dictLabel;
		}
		pickerCancel()
	}

	// 数据字典获取函数
	const blpzFn = (dataType, arr) => {
		getDictData({
			dataType: dataType
		}).then((res => {
			pageData.value[arr] = res.data;
		}))
	}
	// 获取玻璃品种
	blpzFn('ng_materials', 'blpzArr');
	// 获取玻璃厚度
	blpzFn('ng_thickness', 'blhdArr');
	// 获取中空
	blpzFn('ng_hollow', 'zkArr');
	// 获取夹胶
	blpzFn('ng_interlayer', 'jjArr');
	// 获取TNG
	blpzFn('ng_tng', 'tngArr');

	// 返回
	const jumpBack = () => {
		uni.navigateBack()
	}
	// 确定添加
	const okAdd = () => {
		if (!pageItem.value.materials) {
			uni.$showMsg("请选择玻璃品种");
			return false;
		}
		// if (!pageItem.value.interlayer && !pageItem.value.hollow) {
		// 	uni.$showMsg("中空和夹胶选择一个");
		// 	return false;
		// }
		if (pageItem.value.materials.indexOf('lowe') == -1) {
			// 如果玻璃材质不包含lowe
			pageItem.value.tng = '';
		} else {
			if (!pageItem.value.tng) {
				uni.$showMsg("请选择TNG");
				return false;
			}
		}
		if (pageData.value.oldArr&&pageData.value.oldArr.length > 0) {			
			// 已经配置过一个的条件下
			// 配置中玻璃厚度要一致
			// 配置中只能选择一个lowe
			// if (pageData.value.oldArr[0].thickness != pageItem.value.thickness) {
			// 	uni.$showMsg("玻璃厚度不一致，上一次配置厚度是" + pageData.value.oldArr[0].thickness);
			// 	return false;
			// }
			if (pageItem.value.materials.indexOf('lowe') != -1) {
				let flag = false;
				pageData.value.oldArr.forEach((el) => {
					if (el.materials.indexOf('lowe') != -1) {
						flag = true;
					}
				})
				if (flag) {
					uni.$showMsg("lowe只能选择一个");
					return false;
				}
			}
		}
		uni.$emit("pzAddItem", pageItem.value);
		uni.navigateBack();
	}
	onLoad((opt) => {
		if (opt.params) {
			let obj = JSON.parse(opt.params);
			pageItem.value = {
				...pageItem.value,
				...obj
			}
		}
		if (opt.inquiryVos) {
			pageData.value.oldArr = JSON.parse(opt.inquiryVos)
		}
	})
</script>

<style lang="scss" scoped>
	.addBox {
		padding: 10rpx 30rpx 30rpx 30rpx;

		.title {
			line-height: 100rpx;
			color: #333;
		}

		.addItem {
			height: 88rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #EFEFEF;
			border-width: 1px;
			border-style: solid;
			border-color: rgb(133, 133, 133);
			border-radius: 10rpx;
			font-size: 30rpx;
			color: #333;
		}
	}

	.popup-view {
		background-color: #FFFFFF;

		.popup-view-header {
			text-align: center;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			padding: 0 30rpx;
			box-sizing: border-box;

			div {
				width: 150rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 0 28rpx;
				font-size: 34rpx;
				line-height: 90rpx;

				&::first-child {
					color: #888888;
				}

				&::last-child {
					color: #ff2826;
				}
			}

			.input {
				width: 50%;
				line-height: 90rpx;
				height: 90rpx;
				font-size: 28rpx;
			}
		}

		.picker-view {
			width: 100%;
			height: 476rpx;
			margin-top: 20rpx;
			margin-bottom: -68rpx;

			.item {
				height: 40px !important;
				line-height: 40px;
				text-align: center;
				color: #000;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}

	.bjBot {
		padding: 0 30rpx 30rpx 30rpx;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;

		.item {
			width: 48%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #F6AD00;
			background-color: #DDD;
			font-size: 30rpx;
			border-radius: 10rpx
		}

		.btn2 {
			@include bg();
			color: #fff;
		}
	}
</style>